💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น HTML, CSS และ JavaScript แล้วเราอยากจะอยากไปลองใช้ Library หรือ Framework เจ๋ง ๆ ที่ช่วยในการเขียนเว็บ อย่าง React ต้องรู้อะไรบ้าง ??
.
👉 ซึ่งไอเจ้า React เนี่ยมันมีพื้นฐานจาก JavaScript นั่นเอง เราจึงจำเป็นต้องรู้ Concept ที่สำคัญ ๆ ก่อนจะไปใช้งานเจ้า React นั่นเอง
.
มีอะไรบ้าง?? ไปดูกันเลยจ้า 🔥
.
⚙️ Basic Data Structure
Data Structure เป็นหัวใจหลักในการเขียนโปรแกรม ดังนั้นเราต้องเรียนรู้ Data Structure ประเภทต่าง ๆ ให้เข้าใจก่อน ตัวอย่างเช่น การรับ-ส่ง Request จาก API มายัง JS เราก็ต้องมีวิธีที่จะจัดการกับโครงสร้างของข้อมูลที่ดึงมาจาก API เพื่อให้เราสามารถนำข้อมูลนั้นไปใช้ได้ตามต้องการ
.
🌟 DOM
DOM หรือ Document Object Model เป็นการปรับเปลี่ยนโครงสร้าง HTML ให้เป็นแบบ Object โดยให้ JavaScript สามารถจัดการกับ HTML ผ่านโครงสร้างของ DOM ได้นั่นเอง ซึ่งเจ้า React จะใช้โครงสร้าง DOM เป็นหลัก เพื่อสร้างการโต้ตอบบนหน้าเว็บที่สะดวกยิ่งขึ้น ตัวอย่างเช่น เมื่อคลิกปุ่มสามารถแสดงข้อความ หรือเปลี่ยนสีของข้อความนั่นเอง
.
🚚 API
API ย่อมาจาก Application Program Interface ซึ่งเราต้องมีพื้นฐานการใช้งาน API เพื่อนำข้อมูลมาใช้บนหน้าเว็บนั่นเอง อาจจะไม่ต้องถึงกับสร้าง API ใช้ก็ได้นะ เพียงแค่รู้โครงสร้าง และวิธีการดึงมาใช้งานพื้นฐานก็พอแล้ว !!
.
🔧 Axios / Fetch
เครื่องมือสำคัญที่ช่วยให้เราดึง API ต่าง ๆ มาใช้งานได้ง่ายมากขึ้นนั่นเอง !! ซึ่งเป็นสิ่งสำคัญมาก ๆ ในการพัฒนาหน้าเว็บ เพราะมันจะช่วยให้เราสามารถรับ-ส่งข้อมูลแบบไดมามิก และเชื่อมต่อระหว่าง Back-end ได้ง่าย
.
📚 ES6+
สิ่งสำคัญคือเราต้องเรียนรู้วิธีเขียน JavaScript มาตรฐานใหม่ ซึ่งจะช่วยให้โค้ดของเรามีรูปแบบที่อ่านง่ายมากขึ้น !! ซึ่งใน React ที่จะนิยมใช้ ได้แก่ Template Literals, Arrow Functions, Promise, Async / Await, const & let vs var และ Spread Operator นั่นเอง
.
🗂️ JS Array Methods
เมื่อเราสามารถดึงข้อมูลจาก API มาใช้ได้แล้วนั้น เราก็ต้องรู้จักวิธีจัดการกับข้อมูลนั้น ๆ ด้วยนะ ซึ่งมันจะง่ายขึ้นถ้าเรารู้จักใช้ความสามารถของ Array Methods ต่าง ๆ ซึ่งที่นิยมใช้กัน ได้แก่ map(), forEach(), find(), และ filter() เป็นต้น บอกเลยว่าถ้าใช้พวกนี้เป็น ทำให้ชีวิตง่ายขึ้นแน่นอน!! 5555
.
อะทั้งหมดนี้คือ Concept JavaScript พื้นฐานที่สำคัญที่คนเขียน React ต้องมีนะ หวังว่าเพื่อน ๆ จะชอบกันน้าาาา ใครมีอะไรเพิ่มเติมคอมเมนต์ไว้ได้เลย 🥰
.
📑 Source : https://lorenzejay.hashnode.dev/javascript-concepts-you-should-know-before-jumping-into-react-or-any-other-frontend-framework
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有1部Youtube影片,追蹤數超過7萬的網紅在地上滾的工程師 Nic,也在其Youtube影片中提到,## 影片觀看說明 由於問題較多,大家的問題也可能是你的問題,建議可以先閱讀下方的「問題總匯」區,找到時間碼 Time code 之後跳轉到自己想聽的部分,會比較有效率哦 本影片 Q&A 留言是抓取 【2020 年度回顧! 成為 Team leader? 業外收入增加? 技術能力成長? (第一...
「js filter」的推薦目錄:
- 關於js filter 在 BorntoDev Facebook 的最佳解答
- 關於js filter 在 QiuQiu Facebook 的最佳解答
- 關於js filter 在 在地上滾的工程師 Nic Youtube 的最讚貼文
- 關於js filter 在 JavaScript 陣列處理方法[filter(), find(), forEach(), map(), every 的評價
- 關於js filter 在 Filtering Array Elements Based on a Test Function - JavaScript ... 的評價
- 關於js filter 在 Filter.js - GitHub 的評價
- 關於js filter 在 replace and filter method in one condition using JavaScript ... 的評價
js filter 在 QiuQiu Facebook 的最佳解答
Meredith went for her first eye check @unitedeyecare and I must say the staff there really left me impressed! 😍 They were so pro (esp with handling little kids like Meredith) that Meredith thought it was a session to play. @UnitedEyecare provides standard eye tests to specialized and preventative eye care. The Optometrists @arionwong_, @eyeryn_, @russi4nr0ulette, and Shu Ting use the latest equipments to determine the prescription of my glasses and contact lenses, and check my eye health. I was prescribed with the most suitable contact lenses and glasses after a comprehensive exam of the health and condition of my eyes.
Are you ready for an optical shop horror story that caused me phobia from before? I ever sat in an optical shop before for 2 hours, while the shop staff tried to put contact lenses in for me, until both my eyes turned red nevermind, after we finally got it in, the degree was sooooooo wrong it gave me nauseousness and headache and giddy feeling.🤯
In the end I spent another 1 hour at home trying to take it out. Later i went to other shops and realise they gave me the wrong degree. This js why i have power 25, 50 now and i refuse to wear glasses, phobia okay 🧐 Morale of the story is that our eyes come in different sizes and types (dry eyes, sensitive eyes etc) and ONE CONTACT LENS SIZE DOESN’T FIT ALL EYES. So it is important to have an examination of the eye health and curvatures before getting contact lenses 😌
At @unitedeyecare, each pair of glasses is TAILOR-MADE to suit your lifestyle and needs for maximum comfort, therefore reducing eye strain, headache, giddiness or discomfort 🤓 Josh and i both had our glasses done @unitedeyecare and since we’re both on the computer and phone a lot for work, United Eyecare got us lenses with blue-light filter, which will protect our eyesight 😍
I enjoyed the visit especially cox Optometrist @russi4nr0ulette made the eye exam very child-friendly for @meregoround to test her vision, eye focusing skill, 3D vision, colour vision, squint, and hand-eye coordination. It’s never too early to test your child’s eyes, and it can easily be too late! Call @unitedeyecare for appt for a comprehensive eye exam! 😎
js filter 在 在地上滾的工程師 Nic Youtube 的最讚貼文
## 影片觀看說明
由於問題較多,大家的問題也可能是你的問題,建議可以先閱讀下方的「問題總匯」區,找到時間碼 Time code 之後跳轉到自己想聽的部分,會比較有效率哦
本影片 Q&A 留言是抓取
【2020 年度回顧! 成為 Team leader? 業外收入增加? 技術能力成長? (第一次蒐集 Q&A)】https://youtu.be/BGaDN9wxbKE
## 影片中提到的專案
簡單用 React 撰寫的留言爬取篩選功能,可以自己抓去玩
https://github.com/niclin/youtube-comment-filter
## 問題總匯
00:00 開場
01:26 QA-1 - 林天寸
一直很喜歡妳的頻道,不單單是因為工程師,當然也有部分原因是自己也是走工程師這條路的。
前一年2020年開始,其實是我剛轉職工程師的第一年,在滿多地方都遇到不小的問題,在troubleshooting上面也是有許多瓶頸的。
後來除了白天上班,下班看書跟休息,偶然間看到你的影片[工程師如何自我進修],才開始慢慢用計畫的方式取代橫衝猛幹。
不得不說,規劃時間真的是比起技術性的功力還更有成效。因為它讓你適時的放鬆跟加強,然後在工作上面才更有長進,雖然很幹話,但我2020的下半年是這樣做的。
目前在準備考取網路管理的證照CCNA,計畫是走network這一塊,還有很多要磨練的。希望也能多看你產出跟network的影片,這是私心話啦,哈哈。
02:57 QA-2 - 仔仔
1.學程式會建議從前端或是後端哪個開始學會比較好?
2.一開始投履歷如何判斷一家公司是可以成長的,而不是進去3,5年後還是那個跟剛進去程度相差不遠的自己差不多
3.跟程式相關的產業有很多(像是製造業到博弈),可以請Nic分析一下各產業的狀況嗎?以及進去各產業前須要具備哪些程式語言或能力?
4.投履歷時看到一些公司列出所需程式語言和工具一大堆,是不是代表你沒完全具備就不要投履歷了,還是可以請Nic給個意見哪些部分還是可以投看看
5.都說工程師又宅又不會說話,為什麼Nic可以交到女朋友?
10:40 QA-3 - ANDREW NG KAR EARN
如果当写编程语言遇到瓶颈,有什么方法可以有效地避免自己陷入钻牛角尖的情况?
11:46 QA-4 - JS Lin
如果NIC現在選擇能馬上精通一項語言會是哪個?會想用來做什麼PJ?
13:13 QA-5 - Rick0
成為 team leader 後無法直接在技術上有更深入的研究和突破,這樣的變化是否值得?
是否會擔心這樣在技術上跟不上其他人,甚至被下屬看輕呢?
14:39 QA-6 - Henry蔡
因為最近是寒假期間,
我開始考慮下學期的修課,
想請教nic大大,
應該在有什麼樣的基礎上,
開始學design patterns?
我目前是碩士生,
大學非資工本科,
學過Python,
也跟過一些網路影片實作過Flask+PostgreSQL,
大學學過資料結構演算法,
但不到得心應手的程度...
16:07 QA-7 - 黃柏瑋
如何同時Handle好好幾件事
我怎麼覺得上班,然後下班假日寫寫side project後就沒啥時間了🤔🤔🤔
17:24 QA-8 - 乾太
我想問一下這年頭轉行斜槓 VTuber 還有沒有搞頭A?
18:10 QA-9 - uuu06222
之前開始關注你有知道你有面試過人的經驗, 想問一下站在面試官的角度...
面試官會不會比較注重作品需要呈現那些東西, 或是有沒有什麼禁忌是不能碰的嗎?
20:07 QA-10 - Joery Lin
想請教您對於對於給你很多成長和照顧的公司,倘若您有一個更好的機會,無論薪水或未知挑戰都大於現在公司。
您將如何做選擇,或許現在公司會給你加薪留下你。
因為自己曾放棄了許多機會
21:37 QA-11 - YangTing Zheng
Q1: 想問通常一個產品開發的週期都多長呢?負責維運和開發的工作內容是否會差很多?
Q2: 想請您簡單介紹一下資工系學生的出路/工作內容?(如PM.SA.DBA.PG.RD.MIS…或是還有其他的?)
24:16 QA-12 - RTB
Hello World
24:18 QA-13 - Barry
目前是公司MIS 很想轉職成後端工程師,但在面試上面都都時常失敗
常常在問技術關卡時就被問倒了,總覺得 要準備的東西非常的龐大
毫無準備的頭緒,總覺得一直寫side project也不是辦法
26:49 QA-14 - 因地制夷
想請教Nic 有在做投資嗎? ex 股票 想聽一些投資心得
27:13 QA-15 - 比歐
想請教 Nic 大,
在之後的工程師生涯中之後有甚麼規劃或想法嗎?
例如:開發產品創業,或是開班授課、轉做顧問之類的。
28:14 QA-16 - yongming jia
请问新手如何学编程,学完去做什么?怎么自己创业?谢谢🙏
29:33 QA-17 - Minghao Chang
是否能請您推薦用來開發的筆電?(正好最近要汰換電腦),想從今年開始養成寫side project的習慣,謝謝。
30:31 QA-18 - Guan Jun Chen
想知道像Nic這麼厲害的工程師,年薪大概落在哪裡
30:46 QA-19 - Sheng Jiang
想請問Nic,如果非資工背景但是對寫程式有熱情,想轉職當軟體工程師,會建議如何起步?
補充:像是什麼樣的人適合自學,什麼樣的人適合去補習,或者補習跟自學的情況各有哪些優劣?
謝謝Nic
## 結尾
31:49 感想
喜歡影片的話!可以幫忙點個喜歡以及分享、訂閱唷!😘
━━━━━━━━━━━━━━━━
🎬 觀看我的生活廢片頻道: https://bit.ly/2Ldfp1B
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
✉️ 合作邀約信箱: niclin0226@gmail.com
#QA #工程師 #在地上滾的工程師 #前端 #後端 #轉職
js filter 在 Filtering Array Elements Based on a Test Function - JavaScript ... 的推薦與評價
JavaScript Array filter() method in detail ... The filter() method creates a new array with all the elements that pass the test implemented by the callback() ... ... <看更多>
js filter 在 Filter.js - GitHub 的推薦與評價
filter.js is a small and simple jQuery plugin that makes resource filtering a piece of cake. With filter.js you can filter resources that are in an element ... ... <看更多>
js filter 在 JavaScript 陣列處理方法[filter(), find(), forEach(), map(), every 的推薦與評價
陣列處理技巧是JavaScript 中非常重要的一塊,現在框架大亂鬥的時代,框架基本上對於DOM 的處理都有屬於自己一套良好的方法。只要能夠對於陣列資料 ... ... <看更多>
相關內容